<template>
  <div class="whats-app">
    <a
      class="side-consult"
      href="https://api.whatsapp.com/send/?phone=8613720015071&text=Hello+friend%2C+which+machinery+do+you+need%3F&type=phone_number&app_absent=0"
      target="_blank"
    >
      <img class="inner-img" src="https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/whatsapp.png" alt="WhatsApp" />
      <p class="inner-copywriting">WhatsApp</p>
    </a>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {}
}
</script>
<style lang="scss" scoped>
.whats-app {
  position: fixed;
  bottom: 30px;
  left: 20px;
  cursor: pointer;
  z-index: 999;
  .side-consult {
    display: flex;
    align-items: center;
    &:hover .inner-copywriting {
      display: block;
    }
    .inner-img {
      height: 60px;
      width: 60px;
      display: block;
    }
    .inner-copywriting {
      padding: 4px 12px;
      font-size: 14px;
      background-color: #1fbc72;
      color: #fff;
      border-radius: 10px;
      display: none;
    }
  }
}
</style>
